/**
 * Created by ren on 28/03/2017.
 */
import React, {Component} from 'react';
import {StatusBar, Platform} from 'react-native'
import {Button, Text, Container, Content, Item, Footer, FooterTab} from 'native-base'
import * as api from '../utils/api'
import {getSize} from '../utils/response'
import * as Netservice from '../utils/netservice'
import * as type from '../actions'
import {connect} from 'react-redux'
class Filter extends Component {
  constructor(props) {
    super(props)
    this.state = {
      brandListTemp: [],
      districtListTemp: [],
      activeArray: [],
      loaded: false
    }
  }

  _getDataAuth() {
    const {loginStatus, OrderIsLoad}=this.props;
    if (loginStatus && !this.state.loaded && OrderIsLoad) {
      this.getBrandList()
      this._districtList()
      this.setState({
        loaded: true
      })
    }
  }

  componentDidMount() {
    this._getDataAuth()
  }

  componentDidUpdate() {
    this._getDataAuth()
  }

  renderBrandListTemp(data) {
    const {dispatch, loginStatus}=this.props
    if (!loginStatus) {
      return
    }
    var Temp = []
    data.map((obj, index) => {
      this.state.activeArray[index] = false
      Temp.push(<FilterBtn brandName={obj.BrandName} index={index} key={index} id={obj.Id} dispatch={dispatch}/>)
    })
    this.setState({
      brandListTemp: Temp
    })
  }

  getBrandList() {
    const {dispatch, loginStatus}=this.props
    if (!loginStatus) {
      return
    }
    Netservice.get(api.getBusBrands)
      .then(response => {
        this.renderBrandListTemp(response)
      }, (err) => {
        dispatch(type.checkNotLogin())
      })
  }

  _districtList() {
    const {dispatch}=this.props
    Netservice.get(api.districtList)
      .then(response => {
        this._renderDistrictListTemp(response)
      }, (err) => {
        dispatch(type.checkNotLogin())
      })
  }

  _renderDistrictListTemp(data) {
    const {dispatch}=this.props
    var Temp = []
    data.map((obj, index) => {
      this.state.activeArray[index] = false
      Temp.push(<FilterBtn countryName={obj.cityName} index={index} key={index} id={obj.id} dispatch={dispatch}/>)
    })
    this.setState({
      districtListTemp: Temp
    })
  }

  _filterBtn() {
    const {closeDrawer, dispatch} =this.props;
    dispatch(type.filterOrder())
    closeDrawer()
  }

  render() {
    return (
      <Container style={{flex:1,backgroundColor:'#F4F4F4',paddingTop:Platform.OS==='ios'?20:0}}>
        <Content style={{marginTop:getSize(4),padding:getSize(10)}}>
          <Item style={{paddingBottom:getSize(7.5),borderBottomColor:'#95989A',marginBottom:getSize(8.3)}}>
            <Text style={{fontSize:getSize(18)}}>订单筛选</Text>
          </Item>
          <Text style={{marginBottom:getSize(14),color:'#AAAAAA'}}>乡镇选择</Text>
          <Item style={{flexWrap:'wrap',borderBottomWidth:0}}>
            {this.state.districtListTemp}
          </Item>
          <Text style={{marginBottom:getSize(14),color:'#AAAAAA'}}>品牌</Text>
          <Item style={{flexWrap:'wrap'}}>
            {this.state.brandListTemp}
          </Item>
        </Content>
        <Footer>
          <FooterTab>
            <Button full style={{backgroundColor:'#16BD42'}} onPress={()=>this._filterBtn()}>
              <Text style={{color:'white'}}>确定</Text>
            </Button>
          </FooterTab>
        </Footer>
      </Container>
    );
  }
}
class FilterBtn extends Component {
  constructor(props) {
    super(props);
    this.state = {
      actived: false
    }
  }

  _selectBrand(brandId) {
    const {dispatch}=this.props
    if (!this.state.actived) {
      dispatch(type.selectBrand(brandId))
    } else {
      dispatch(type.cancelBrand(brandId))
    }
    this.setState({
      actived: !this.state.actived
    })
  }

  _selectCountry(countryId) {
    const {dispatch}=this.props
    if (!this.state.actived) {
      dispatch(type.selectCountry(countryId))
    } else {
      dispatch(type.cancelCountry(countryId))
    }
    this.setState({
      actived: !this.state.actived
    })
  }

  render() {
    const {id, brandName, index, countryName}=this.props
    if (brandName) {
      return (
        (index + 1) % 3 === 0 ? <Button small style={this.state.actived?styles.activeBtn1:styles.btn1}
                                        onPress={(brandId)=>this._selectBrand(id)}>
            <Text style={this.state.actived?styles.activeBtnText:styles.btnText} numberOfLines={1}>{brandName}</Text>
          </Button> : <Button small style={this.state.actived?styles.activeBtn:styles.btn}
                              onPress={(brandId)=>this._selectBrand(id)}>
            <Text style={this.state.actived?styles.activeBtnText:styles.btnText} numberOfLines={1}>{brandName}</Text>
          </Button>
      )
    } else {
      return (
        (index + 1) % 3 === 0 ? <Button small style={this.state.actived?styles.activeBtn1:styles.btn1}
                                        onPress={(countryId)=>this._selectCountry(id)}>
            <Text style={this.state.actived?styles.activeBtnText:styles.btnText} numberOfLines={1}>{countryName}</Text>
          </Button> : <Button small style={this.state.actived?styles.activeBtn:styles.btn}
                              onPress={(countryId)=>this._selectCountry(id)}>
            <Text style={this.state.actived?styles.activeBtnText:styles.btnText} numberOfLines={1}>{countryName}</Text>
          </Button>
      )
    }

  }
}

function select(store) {
  return {
    loginStatus: store.routesStore.loginStatus,
    OrderIsLoad: store.routesStore.OrderIsLoad
  }
}
export default connect(select)(Filter)
const
  styles = {
    btn: {
      width: getSize(84),
      height: getSize(30),
      paddingLeft: 0,
      paddingRight: 0,
      backgroundColor: '#EBEBEB',
      borderWidth: 1,
      borderColor: '#B2B2B2',
      justifyContent: 'center',
      borderRadius: 0,
      marginRight: getSize(7.5),
      marginBottom: getSize(17.5)
    },
    activeBtn: {
      width: getSize(84),
      height: getSize(30),
      paddingLeft: 0,
      paddingRight: 0,
      backgroundColor: '#16BD42',
      borderWidth: 1,
      justifyContent: 'center',
      borderRadius: 0,
      marginRight: getSize(7.5),
      marginBottom: getSize(17.5),
      borderColor: '#16BD42'
    },
    activeBtn1: {
      width: getSize(84),
      height: getSize(30),
      paddingLeft: 0,
      paddingRight: 0,
      backgroundColor: '#16BD42',
      borderWidth: 1,
      justifyContent: 'center',
      borderRadius: 0,
      marginBottom: getSize(17.5),
      borderColor: '#16BD42'
    },
    btn1: {
      width: getSize(84),
      height: getSize(30),
      paddingLeft: 0,
      paddingRight: 0,
      backgroundColor: '#EBEBEB',
      borderWidth: 1,
      borderColor: '#B2B2B2',
      justifyContent: 'center',
      borderRadius: 0,
      marginBottom: getSize(17.5)
    },
    btnText: {
      fontSize: getSize(13),
      color: '#333333'
    },
    activeBtnText: {
      fontSize: getSize(13),
      color: 'white'
    }
  }